<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
		<meta name="description" content="小米是全球领先的TCT(信息与通信)基础设施和只能终端提供商,致力于把数字世界带入每个人,每个家庭,每个组织,构建万物互联的智能世界." />
		<meta name="keywords" content="电信网络,无线接入,网络,核心网,业务与软件,站点解决方案,全球服务,系统集成解决方案,保障服务解决方案,学习与发展解决方案,终端,移动宽带终端,手机,融合终端,视讯解决方案" />
		<!--权威标签:标准-->
		<link rel="canonical" href="https://https://www.mi.com/index.html">
		<link rel="stylesheet" type="text/css" href="css/userinfo.css">
		<!--标题前图标-->
		<link rel="shortcut icon" href="img/favicon.ico" />
		<script src="js/register.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript" src="js/userinfo.js"></script>
		<script src="js/jquery-1.12.4.js"></script>
		<script src="js/jquery-1.12.4.min.js"></script>
		<title>小米账号-个人信息</title>
	</head>

	<body>
		<!--
        	最外面的框
        -->
		<div id="wrap">

			<!--
             	作者：zhaohaode@outlook.com
             	时间：2018-09-29
             	描述：头部
             -->
			<div id="header">
				<a href="register.html"><img src="img/mi_account_number.png" /></a>
				<a name="sign_out" href="register.html" class="text">退出</a>
			</div>
			<!--
            	作者：zhaohaode@outlook.com
            	时间：2018-09-29
            	描述：内容
            -->
			<div id="content">
				<ul id="nav">
					<li>
						<a href="#">账号安全</a>
					</li>
					<li>
						<a href="#">个人信息</a>
					</li>
					<li>
						<a href="#">绑定授权</a>
					</li>
					<li>
						<a href="#">小米服务</a>
					</li>
					<div id="head-portrait">
						<div id="face">
							<img src="img/head_portrait.png" />
						</div>
						<p class="text">请设置名字</p>
						<p class="text num">2158757663</p>
					</div>
				</ul>
				<div id="table-wrap">
					<div id="table">
						<div id="face-block">
							<div id="face">
								<img src="img/head_portrait.png" />
								<a class="text" href="#">设置头像</a>
							</div>
						</div>
						<table>
							<tr>
								<td>
									<a id="showModel" href="#">
										<div id="test"></div>编辑</a>
									<h4>基础资料</h4>
								</td>
							</tr>
							<tr>
								<td>姓名：<span style="color:#999999">请设置名字</span></td>
							</tr>
							<tr>
								<td>生日：</td>
							</tr>
							<tr>
								<td>性别：</td>
							</tr>
							<tr>
								<td>
									<a href="#">管理</a>
									<h4>高级设置</h4>
								</td>
							</tr>
							<tr>
								<td>银行卡：
								</td>
							</tr>
							<tr>
								<td>账号地区：中国</td>
							</tr>
						</table>
					</div>
					<div id="modal" class="modal">
						<div class="modal-content">
							<header class="modal-header">
								<h4>模态框标题</h4>
								<span class="close">×</span>
							</header>
							<div class="modal-body">
								<form action="" method="post">
									<div id="text">
										<h4>编辑基础资料</h4>
									</div>
									<div class="text">
										姓名：<input type="" name="" id="" value="" />
									</div>
									<div class="text">
										手机号码：<input type="" name="" id="" value="" />
									</div>
									<div class="text">
										邮箱：<input type="" name="" id="" value="" />
									</div>
									<input type="submit" value="保存" /> <input type="button" value="取消" />
								</form>
							</div>
							<footer class="modal-footer">
								<button id="cancel">取消</button>
								<button id="sure">确定</button>
							</footer>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="footer">
			<div id="font-family">
				<p class="text">
					<a href="" class="choise">简体</a>|
					<a href="">繁体</a>|
					<a href="">English</a>|
					<a href="">常见问题</a>
				</p>
			</div>
			<div id="copyright">
				<p class="text">
					小米公司版权所有-京ICP备10046444-
					<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"><img src="img/ghs.png" />京公网安备11010802020134号</a>-京ICP证110507号
				</p>
			</div>
		</div>
		</div>

		<script>
			var btn = document.getElementById('showModel');
			var close = document.getElementsByClassName('close')[0];
			var cancel = document.getElementById('cancel');
			var modal = document.getElementById('modal');
			btn.addEventListener('click', function() {
				modal.style.display = "block";
			});
			close.addEventListener('click', function() {
				modal.style.display = "none";
			});
			cancel.addEventListener('click', function() {
				modal.style.display = "none";
			});
		</script>
	</body>

</html>